<div class="user-container">
  <!-- <nz-card>
    <form nz-form nzLayout="inline">
      <nz-input-group [nzPrefix]="prefixTemplate" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input placeholder="用户姓名" [(ngModel)]="searchName" />
      </nz-input-group>
      <ng-template #prefixTemplate><i nz-icon nzType="search"></i></ng-template>
      <ng-template #suffixTemplate><i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill"
          nzType="close-circle" *ngIf="searchName" (click)="searchName = null"></i></ng-template>

      <nz-select [(ngModel)]="searchRole" nzAllowClear nzPlaceHolder="用户角色">
        <nz-option *ngFor="let item of roleData" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
      </nz-select>
    </form>
  </nz-card> -->
  <nz-card>
    <div class="add-box">
      <button nz-button (click)="openEditModal()" nzType="primary">新增</button>
    </div>
    <nz-table
      #nzTable
      [nzData]="tableData"
      [nzFrontPagination]="false"
      [nzTotal]="total"
      [nzPageSize]="pageSize"
      [(nzPageIndex)]="pageNum"
      (nzPageIndexChange)="queryInfo()"
    >
      <thead>
        <tr>
          <th nzCustomFilter>
            员工账号
            <i
              nz-th-extra
              class="ant-table-filter-icon"
              nz-icon
              nz-dropdown
              #dropdown="nzDropdown"
              nzType="search"
              [nzDropdownMenu]="menu"
              [nzPlacement]="'topLeft'"
              [class.ant-table-filter-open]="dropdown.nzVisible"
              nzTrigger="click"
              nzPlacement="bottomRight"
              [nzClickHide]="false"
              nzTableFilter
            ></i>
          </th>
          <th>员工姓名</th>
          <th>角色</th>
          <th>所属管理处</th>
          <th>所属管理所</th>
          <th>电子邮箱</th>
          <th>手机号码</th>
          <th>创建时间</th>
          <th>更新时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of nzTable.data">
          <td>{{ row.account }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.roleName }}</td>
          <td>{{ row.manageName }}</td>
          <td>{{ sectionMap[row.sectionId] }}</td>
          <td>{{ row.email }}</td>
          <td>{{ row.mobile }}</td>
          <td>{{ row.createDate }}</td>
          <td>{{ row.updateDate }}</td>
          <td>
            <i
              nz-icon
              nzType="edit"
              nzTheme="outline"
              (click)="openEditModal(row)"
            ></i>
            <a
              nz-popconfirm
              nzPopconfirmTitle="确认删除该用户吗？"
              nzPopconfirmPlacement="left"
              (nzOnConfirm)="onDelete(row.id)"
            >
              <i nz-icon nzType="delete" nzTheme="outline"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <div class="search-box">
        <input
          type="text"
          nz-input
          placeholder="用户姓名"
          [(ngModel)]="searchName"
        />
        <button
          nz-button
          nzSize="small"
          nzType="primary"
          (click)="queryInfo()"
          class="search-button"
        >
          搜索
        </button>
        <button nz-button nzSize="small" (click)="reset()">重置</button>
      </div>
    </nz-dropdown-menu>
  </nz-card>
  <nz-modal
    [nzBodyStyle]="nzBodyStyle"
    nzWidth="660"
    [(nzVisible)]="modalShow"
    [nzTitle]="modalTitle"
    (nzOnCancel)="onCancel()"
    (nzOnOk)="onConfirm()"
  >
    <form nz-form [formGroup]="form">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label>登录账号</nz-form-label>
            <nz-form-control>
              <input
                nz-input
                formControlName="account"
                placeholder="登录账号"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label>用户密码</nz-form-label>
            <nz-form-control>
              <input
                nz-input
                type="password"
                formControlName="password"
                placeholder="用户密码"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label>用户姓名</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="name" placeholder="用户姓名" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label>用户角色</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="roleId" nzPlaceHolder="用户角色">
                <nz-option
                  *ngFor="let item of roleData"
                  [nzValue]="item.id"
                  [nzLabel]="item.name"
                ></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label>所属管理处</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="manageId" nzPlaceHolder="所属管理处">
                <nz-option
                  *ngFor="let item of manageList"
                  [nzValue]="item.id"
                  [nzLabel]="item.manageName"
                ></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label>所属管理所</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="sectionId" nzPlaceHolder="所属管理所" [nzAllowClear]="true">
                <nz-option
                        *ngFor="let item of sectionList"
                        [nzValue]="item.value"
                        [nzLabel]="item.label"
                ></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label>手机号码</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="mobile" placeholder="手机号码" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label>电子邮箱</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="email" placeholder="电子邮箱" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label>备注信息</nz-form-label>
            <nz-form-control>
              <textarea
                nz-input
                formControlName="remarks"
                rows="2"
                placeholder="备注信息"
              ></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-modal>
</div>
